<template>

  <div>
    <div class="page-wrapper">


      <div class="user-content">
        <div class="user-header">
          <h2>用户列表</h2>
        </div>

        <!-- 搜索框 -->
        <div class="search-box">
          <span>用户名</span>
          <input type="text" v-model="loginName" />
          <span>创建日期</span>
          <input type="date" v-model="createDate" />
          <button @click="searchNews(1, 5)">搜索</button>
        </div>

        <!-- 表格 -->
        <table v-if="pageInfo.list.length > 0">
          <thead>
            <tr>
              <th>用户名称</th>
              <th>真实姓名</th>
              <th>性别</th>
              <th>类型</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="user in pageInfo.list" :key="user.id">
              <td>{{ user.loginName }}</td>
              <td>{{ user.userName }}</td>
              <td>{{ user.sex === 1 ? '男' : '女' }}</td>
              <td>{{ user.type === 1 ? '后台' : '前台' }}</td>
              <td>
                <button @click="delUser(user.id)" class="btn-delete">删除</button>
              </td>
            </tr>

          </tbody>
        </table>
        <h1 v-if="pageInfo.total === 0">
          暂无相关数据
        </h1>
        <!-- 分页 -->
        <div class="pagination" v-if="pageInfo.pages > 1">
          <span>共 {{ pageInfo.total }} 条记录</span>
          <span>{{ pageInfo.pageNum }} / {{ pageInfo.pages }}</span>

          <button @click="changePage(1)" class="page-btn next-btn">首页</button>

          <button @click="changePage(pageInfo.pageNum - 1)" :disabled="pageInfo.pageNum === 1"
            class="page-btn prev-btn">上一页</button>

          <button v-for="page in pageInfo.navigatepageNums" :key="page" @click="changePage(page)"
            :disabled="pageInfo.pageNum === page" style="margin-right: 10px;"> {{ page }} </button>
          <button @click="changePage(pageInfo.pageNum + 1)" :disabled="pageInfo.pageNum === pageInfo.pages"
            class="page-btn next-btn">下一页</button>

          <button @click="changePage(pageInfo.pages)" class="page-btn next-btn">尾页</button>
        </div>
      </div>
    </div>
  </div>

</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'

// 响应式数据
const pageInfo = ref({
  list: [],
  pageNum: 1,
  pageSize: 5,
  pages: 0,
  total: 0
})

const loginName = ref('')
const createDate = ref('')


// 搜索用户
const searchNews = async (pageNum, pageSize) => {


  const response = await axios.get('api/pageUser', {
    params: {
      pageNum: pageNum,
      pageSize: pageSize,
      loginName: loginName.value,
      createDate: createDate.value,

    }
  })

  pageInfo.value = response.data.pageInfo || {
    list: [],
    pageNum: 1,
    pageSize: 5,
    pages: 0,
    navigatepageNums: [1],
    total: 0
  }
}

// 删除用户
const delUser = async (id) => {
  if (confirm('确定要删除该用户吗？')) {
    const loginId = window.sessionStorage.getItem('id')
    if(loginId == id){
      alert('不能删除自己')
      return
    }
    const response = await axios.get('api/delUser', {
      params: { id: id }
    })

    console.log(response.data)
    if (response.data.code === 5200) {
      alert('删除成功')
      searchNews(pageInfo.value.pageNum, 5)
    } else {
      alert('删除失败,请先删除改用户的订单')
    }
  }
}

// 切换页码
const changePage = (page) => {
  if (page < 1 || page > pageInfo.value.pages) return
  searchNews(page, 5)
}

// 组件挂载时加载数据
onMounted(() => {
  const type = localStorage.getItem('type')
  if(type == 1){
   
    window.location.href = '/'
     alert('无权限访问')
  }
  searchNews(1, 5)
})
</script>

<style scoped>
.user-container {
  width: 50rem;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  border: 1px solid #ddd;
  padding: 5px;
  text-align: center;
}

.page-wrapper {
  display: flex;
  min-height: 100vh;
}

.page-sidebar {
  width: 220px;
  border-right: 1px solid #eee;
  flex-shrink: 0;
}

.user-content {
  flex: 1;
  padding: 24px;
  box-sizing: border-box;
  overflow-y: auto;
}

.search-box {
  margin-bottom: 20px;

}

.search-box input {
  padding: 6px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.search-box button {
  padding: 6px 12px;
}


.btn-modify {
  padding: 4px 8px;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  margin-right: 5px;
}




.pagination {
  margin-top: 20px;
  text-align: center;
}

.pagination span {
  margin: 0 10px;
}

.page-btn {
  padding: 6px 12px;
  margin: 0 5px;
  border: 1px solid #ddd;
  cursor: pointer;
  border-radius: 4px;
}

.page-btn:disabled {
  cursor: not-allowed;
}
</style>